<template>
	<el-container>
		<el-aside width="260px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model.trim="groupFilterText" clearable></el-input>
					<el-button type="primary" round icon="el-icon-plus" class="add-column" @click="edit"></el-button>
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="group"
						class="menu"
						node-key="id"
						default-expand-all
						:data="group"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:filter-node-method="groupFilterNode"
						@node-click="groupClick">
						<template #default="{ node, data }">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
								<span class="do">
									<el-icon @click.stop="edit(data)">
										<el-icon-edit />
									</el-icon>
									<el-icon @click.stop="remove(node, data)">
										<el-icon-delete />
									</el-icon>
								</span>
							</span>
						</template>
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>

		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button
						icon="el-icon-plus"
						type="primary"
						:disabled="(selectColumn.id || 0) <= 0"
						@click="open_dialog" />
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model.trim="param.key" clearable placeholder="关键字" />
						<el-button icon="el-icon-search" type="primary" @click="search" />
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable
					ref="table"
					:api-obj="apiObj"
					:column="column"
					:params="defaultReqParams"
					row-key="id"
					hideContextMenu>
					<!-- 固定列-选择列 -->
					<el-table-column label="#" type="index" width="60"></el-table-column>
					<el-table-column align="center" fixed="right" label="操作" width="140">
						<template #default="scope">
							<el-button text size="small" type="primary" @click="open_dialog(scope.row)">编辑</el-button>
							<el-divider direction="vertical" />
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
					<template #sort="{ data }">
						<el-link style="color: #5cd29d" :underline="false" @click="upSort(data)">
							<el-icon><el-icon-top /></el-icon>
						</el-link>
						<el-divider direction="vertical" />
						<el-link style="color: #5cd29d" :underline="false" @click="downSort(data)">
							<el-icon><el-icon-bottom /></el-icon>
						</el-link>
					</template>
					<template #owner="{ data }">
						<el-tag v-if="data.owner === 1">{{ data.ownerDesc }}</el-tag>
						<el-tag type="warning" v-else-if="data.owner === 2">{{ data.ownerDesc }}</el-tag>
						<el-tag type="info" v-else>{{ data.ownerDesc }}</el-tag>
					</template>
				</scTable>
			</el-main>

			<station-selector ref="stationSelector" @complete="complete" />
			<column ref="column" @complete="columnComplete" />
		</el-container>
	</el-container>
</template>

<script>
import stationSelector from "./stationSelector";
import column from "./column";

export default {
	components: {
		stationSelector,
		column,
	},
	data() {
		return {
			apiObj: this.$API.mdstation.byline,
			list: [],
			showGrouploading: false,
			groupFilterText: "",
			group: [],
			param: {
				key: "",
			},
			defaultReqParams: { lineId: 0 },
			selectColumn: {},
			column: [
				{ prop: "id", label: "id", width: 100, hide: true },
				{ prop: 'opCode', label: '工位编号', width: 100 },
				{ prop: 'opName', label: '工位名称', width: 100 },
				{ prop: 'sort', label: '排序', width: 100 },
				{ prop: 'attrDesc', label: '工位属性', width: 80 },
				{ prop: 'owner', label: '工位归属', width: 80 },
				{ prop: 'classifyDesc', label: '工位类别', width: 80 },
				{ prop: 'createTime', label: '创建时间', width: 140 },
			],
		};
	},
	mounted() {
		this.getGroup();
	},
	methods: {
		//加载树数据
		async getGroup() {
			this.showGrouploading = true;
			const resp = await this.$API.mdline.list.get();
			this.showGrouploading = false;

			const _tree = [{ id: -1, value: 0, label: "所有产线", parentId: 0 }];
			resp.data.some((m) => {
				_tree.push({
					id: m.id,
					value: m.id,
					label: m.lineName,
					lineCode: m.lineCode,
					lineName: m.lineName,
					parentId: -1,
				});
			});
			this.group = this.$TOOL.changeTree(_tree);
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			this.selectColumn = data;
			if (data.id === -1) {
				this.$refs.table.reload({ lineId: this.defaultReqParams.lineId });
				return;
			}

			let params = {
				lineId: data.id,
			};
			this.$refs.table.reload(params);
		},
		async upSort(row) {
			if (row.pos == 1) {
				return;
			}
			await this.$API.mdstation.upsort.put(row);
			this.$refs.table.refresh();
		},
		async downSort(row) {
			await this.$API.mdstation.downsort.put(row);
			this.$refs.table.refresh();
		},
		complete() {
			this.$refs.table.refresh({ lineId: this.defaultReqParams.lineId });
		},
		columnComplete() {
			this.getGroup();
		},
		search() {
			this.$refs.table.upData(this.param);
		},
		async table_del(row) {
			var res = await this.$API.mdstation.delete.delete(row.id);
			if (res.code == 200) {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		edit(row) {
			if (row.id) {
				this.$refs.column.open(row);
			} else {
				this.$refs.column.open();
			}
		},
		remove(node, data) {
			this.$confirm(`确定要删除选中的 ${data.label} 项吗？`, "提示", {
				type: "warning",
				confirmButtonText: "确定",
				cancelButtonText: "取消",
			}).then(async () => {
				var res = await this.$API.mdline.delete.delete(
					data.id
				);
				if (res.code == 200) {
					this.columnComplete();
					this.$message.success("删除成功");
				} else {
					this.$alert(res.message, "提示", { type: "error" });
				}
			}).catch(() => { });
		},
		open_dialog(row) {
			if (row.id) {
				this.$refs.stationSelector.open(row);
			} else {
				if (this.selectColumn.id <= 0) {
					this.$message.warning("请选择产线");
					return;
				}

				this.$refs.stationSelector.open(this.selectColumn, "add");
			}
		},
	},
};
</script>

<style scoped>
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	display: none;
}

.custom-tree-node .do i {
	margin-left: 5px;
	color: #999;
}

.custom-tree-node .do i:hover {
	color: #333;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	display: inline-block;
}

.add-column {
	padding: 8px !important;
	margin: 8px;
}
</style>
